<template>
    <div>
      <!--订单搜索-->
      <span>
            <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input style="width: 300px" placeholder="输入顾客的姓名,手机号,订单id查找订单..." v-model="message"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>

      <!--订单列表展示-->
      <el-table :data="orderList">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单号" align="center" prop="id" />
        <el-table-column label="顾客姓名" align="center" prop="name" />
        <el-table-column label="顾客电话" align="center" prop="phone" />
        <el-table-column label="台号" align="center" prop="table_number" />
        <el-table-column label="消费总额" align="center" prop="totalprice"/>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleSee(scope.row)"
              v-hasPermi="['system:student:edit']"
            >查看详细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />

      <!--查看订单详细的菜品对话框-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <div class="todayOrder">

          <div style="margin-bottom: 5px; border-bottom: 1px solid #9c9ca5">
            <span>订单号 {{orders.id}}</span>
            <span style="margin-left: 410px; color: #9c9ca5">{{orders.createtime}}</span>
          </div>

          <div class="dishs" v-for="(dishitem, index) of dishs" :key="index">
              <span style="font-weight: bold;">{{dishitem.dname}}</span>
              <span style="margin-left: 475px;font-weight: bold; color: blue">× {{dishitem.dish_num}}</span>
              <span style="margin-left: 25px; color: red;font-weight: bold">$ {{dishitem.dprice}}</span>
          </div>
          <div style="text-align: right; width: 620px;">
            总计: <span style="color: red;font-weight: bold">$ {{orders.totalprice}}</span>
          </div>
        </div>

      </el-dialog>
    </div>
</template>

<script>
  import {listAllOrder, listLikeOrder, listOrderById} from "@/api/catering/orderList";

  export default {
    name: 'index',
    data(){
      return{
        orderList:[],
        message:'',
        total:0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        dishs:[],
        dialogFormVisible:false,
        title:'订单所点菜品',
        orders:{
          id:'',
          totalprice:'',
          createtime:'',
        }
      }
    },
    created() {
      this.getAllOrderList();
    },
    methods:{
      getAllOrderList() {
        //获取所有订单营业额和订单数量
        listAllOrder(this.queryParams).then(response => {
          console.log(response.data);
          this.orderList=response.data.list;
          this.total = response.data.total;
          console.log(this.orderList)
        })
      },
      //搜索门店方法
      onSubmit(){
        this.orderList=[];
        const message = this.message;
        listLikeOrder(message).then(response =>{
          console.log(response);
          this.orderList=response.data
          console.log(this.orderList)
        })
      },
      //查看详细
      handleSee(row){
        this.dialogFormVisible=true;
        console.log(row)
        this.orders.id=row.id
        this.orders.totalprice=row.totalprice
        this.orders.createtime=row.createtime
        const id = row.id;
        listOrderById(id).then(response =>{
          console.log(response);
          this.dishs=response.data
          console.log(this.dishs)
        })
      },
    }
  }
</script>

<style scoped>
  .todayOrder{
    /*background-color: #3A71A8;*/
    font-size: 16px;
    padding: 15px 45px;
    border: 1px solid #9c9ca5;
  }
  .dishs{
    padding: 15px 0;
    border-bottom: 1px solid #9c9ca5;
  }
</style>
